<template>
  <div class="app-container">
    <!-- 订单编辑 -->
    <el-card class="box-card">
      <h3>订单编辑</h3>
      <el-form ref="orders" :rules="rules" :model="orders" label-width="150px">
        <el-form-item label="订单编号" prop="orderId">
          <el-input v-model="orders.orderId" readonly />
        </el-form-item>
        <el-form-item label="用户编号" prop="userId">
          <el-input v-model="orders.userId" />
        </el-form-item>
        <el-form-item label="商家编号">
          <el-input v-model="orders.businessId"> </el-input>
        </el-form-item>
        <el-form-item label="订购日期" prop="orderDate">
          <div class="block">
            <!-- <span class="demonstration">默认为 Date 对象</span> -->
            <!-- <div class="demonstration">{{ orderData }}</div> -->
            <el-date-picker
              v-model="orderData"
              type="date"
              placeholder="选择日期"
              format="yyyy 年 MM 月 dd 日"
            >
            </el-date-picker>
          </div>
          <!-- <el-input v-model="orders.orderDate" /> -->
        </el-form-item>
        <el-form-item label="订单总价" prop="orderTotal">
          <el-input v-model="orders.orderTotal" placeholder="0.00">
            <template slot="append">元</template>
          </el-input>
        </el-form-item>
        <el-form-item label="送货地址编号" prop="daId">
          <el-input v-model="orders.daId" />
        </el-form-item>
        <el-form-item label="订单状态">
          <el-input v-model="orders.orderState"> </el-input>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 更新取消按钮 -->
    <div class="op-container">
      <el-button @click="handleCancel">取消</el-button>
      <el-button type="primary" @click="handleEdit">更新订单</el-button>
    </div>
  </div>
</template>

<style>
.el-card {
  margin-bottom: 10px;
}
.el-tag + .el-tag {
  margin-left: 10px;
}
.input-new-keyword {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #20a0ff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 120px;
  height: 120px;
  line-height: 120px;
  text-align: center;
}
.avatar {
  width: 145px;
  height: 145px;
  display: block;
}
</style>

<script>
import { detailOrders, editOrders } from "@/api/orders/orders";
import { createStorage, uploadPath } from "@/api/system/storage";
import Editor from "@/components/TEditor.vue";
import { MessageBox } from "element-ui";
import { getToken } from "@/utils/auth";

export default {
  name: "GoodsEdit",
  components: { Editor },
  data() {
    return {
      orderData: "",
      uploadPath, // 图片上传路径
      orders: { gallery: [] }, // 订单信息
      // 表单验证规则
      rules: {
        orderId: [
          { required: true, message: "订单编号不能为空", trigger: "blur" },
        ],
        userId: [
          { required: true, message: "订单名称不能为空", trigger: "blur" },
        ],
      },
      // 富文本编辑器初始化
      editorInit: {
        language: "zh_CN",    
        convert_urls: false,
        plugins: [
          "advlist anchor autolink autosave code codesample colorpicker colorpicker contextmenu directionality emoticons fullscreen hr image imagetools importcss insertdatetime link lists media nonbreaking noneditable pagebreak paste preview print save searchreplace spellchecker tabfocus table template textcolor textpattern visualblocks visualchars wordcount",
        ],
        toolbar: [
          "searchreplace bold italic underline strikethrough alignleft aligncenter alignright outdent indent  blockquote undo redo removeformat subscript superscript code codesample",
          "hr bullist numlist link image charmap preview anchor pagebreak insertdatetime media table emoticons forecolor backcolor fullscreen",
        ],
        // 上传钩子
        images_upload_handler: function (blobInfo, success, failure) {
          const formData = new FormData();
          formData.append("file", blobInfo.blob());
          createStorage(formData)
            .then((res) => {
              success(res.data.data.url);
            })
            .catch(() => {
              failure("上传失败，请重新上传");
            });
        },
      },
    };
  },
  computed: {
    // 上传请求头
    headers() {
      return {
        "Shopping-Admin-Token": getToken(),
      };
    },
  },
  created() {
    // 页面数据初始化
    this.init();
  },
  methods: {
    // 获取数据 ，判断是否有订单id传入
    init: function () {
      if (this.$route.query.id == null) {
        return;
      }

      const ordersId = this.$route.query.id;

      detailOrders(ordersId).then((response) => {
        this.orders = response.data.orders;
      });
    },
    //取消更新订单
    handleCancel() {
      // this.init(); //一
      // this.$router.push({ path: "/orders/index" }); //二
      this.$router.go(-1); // 三
    },

    // 更新订单钩子
    handleEdit: function () {
      // 构建提交数据
      const finalGoods = {
        orders: this.orders,
      };
      // 调用接口
      editOrders(finalGoods)
        .then((response) => {
          this.$notify.success({
            title: "成功",
            message: "更新成功",
          });
          this.$router.push({ path: "/orders/index" });
        })
        .catch((response) => {
          MessageBox.alert("业务错误：" + response.data.errmsg, "警告", {
            confirmButtonText: "确定",
            type: "error",
          });
        });
    },

  },
};
</script>
